<template>
	<view class="index">
		<view class="content">
			<view class="button-area">
				<text class="text1">{{text1}}</text>
				<text class="text2">{{text2}}</text>
				<text class="text3">{{text3}}</text>
			</view>
			<uv-form labelPosition="left" :model="model1" :rules="rules" ref="form">
				<!-- 				<uv-form-item label="真实姓名" prop="realName" borderBottom label-width="100px">
					<uv-input v-model="model1.realName" placeholder="请输入真实姓名" border="none">
					</uv-input>
				</uv-form-item> -->
				<!-- 				<uv-form-item label="用户名" prop="loginName" borderBottom label-width="100px" :required="true">
					<uv-input v-model="model1.loginName" placeholder="请输入用户名" border="none">
					</uv-input>
				</uv-form-item> -->
				<uv-form-item label="密码" prop="password" borderBottom label-width="100px" :required="true">
					<uv-input v-model="model1.password" placeholder="请输入密码" border="none" @blur="blur"
						:type="isOpen?'text':'password'">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="确认密码" prop="password" borderBottom label-width="100px" :required="true">
					<uv-input v-model="password1" placeholder="请输入密码" border="none" @blur="blur"
						:type="isOpen?'text':'password'">
					</uv-input>
				</uv-form-item>
				<!-- 输入框 -->
				<view class="phone-item" style="">
					<!-- 手机号输入框 -->
					<view style="width: 75%;">
						<uv-form-item label="手机号" prop="mobilePhone" borderBottom label-width="100px" :required="true">
							<uv-input v-model="model1.mobilePhone" placeholder="请输入手机号" border="none">
							</uv-input>
						</uv-form-item>
					</view>
					<!-- 发送验证码按钮 -->
					<view class="get-code" @click="getCode" v-if="codeBtn.isCode || codeBtn.codeNumber == 0">
						{{codeBtn.codeName}}
					</view>
					<view class="get-code" v-else>{{codeBtn.codeNumber}}s</view>
				</view>
			</uv-form>
			<view class="input-list">
				<!-- input输入框 -->
				<input class="input-item" v-if="focus" adjust-position="false" auto-blur="true" @blur="inputCodeBlur"
					@input="inputCode" :focus="focus" v-model="code" @focus="inputFocus" type="number" oneTimeCode
					maxlength="6" />
				<!-- 验证码输入框 -->
				<view class="code-list" @click="focusClick">
					<view class="code-item" v-for="(item,index) in 6" :key="index"
						:style="(index == code.length && focus ? 'border-color:#15d3fe;':'')">{{code[index]}}</view>
				</view>
			</view>

			<view class="button-area">
				<text class="text4">{{text4}}</text>
				<text class="text5">{{text5}} <text class="text6">{{text6}}</text></text>
			</view>

			<view class="button-wrap">
				<!-- 账号登录 -->
				<button class="button-login" @click="navigateToAccountLogin">
					<text class="wx-login loginText1">{{accountLogin}}</text>
				</button>
			</view>

			<view class="account-text">
				<text class="wx-text">{{accountText}} </text>
				<text class="wx-text1" @click="buttonText">{{accountText1}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		send,
		checkVerCode,
		mchUserAdd,
		getOpenId
	} from '@/network/login.js';
	export default {
		data() {
			return {
				model1: {
					loginName: "",
					password: "",
					mobilePhone: "",
					openId: ""
				},
				password1: "",
				query: { // 手机号
					phone: "",
					type: "1"
				},
				timer: null, // 定时器
				codeBtn: { // 按钮状态切换
					codeName: '获取验证码', // 状态名称
					codeNumber: 60, // 倒计时秒数
					isCode: true // 是否获取验证码
				},
				code: '', // 验证码字段
				focus: false, // input是否聚焦
				text1: "手机号码注册",
				text2: "请输入您的有效手机号码，我们将向您",
				text3: "发送6位数验证码，以验证账户。",
				text4: "请在60秒内输入验证码",
				text5: "没有收到验证码?",
				text6: "重新发送验证码",
				accountLogin: '确定',
				accountText: '请查看',
				accountText1: '服务协议',
				rules: {
					// realName: {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写姓名',
					// 	trigger: ['blur', 'change']
					// },
					loginName: {
						required: true,
						message: '请填写登录名称',
						trigger: ['blur']
					},
					password: [{
							required: true,
							message: '请填写登录密码',
							trigger: ['blur']
						}, {
							min: 8,
							message: '密码长度最低8位!',
							trigger: ['blur']
						},
						{
							validator: (rule, value, callback) => {
								var passwordreg =
									/^(?!([a-zA-Z]+|[a-z\d]+|[a-z~`@#\$%\^&\*\(\)_\-\+=\{\[\}\]\|\\:;\"\'<,>\.\?\/\!]+|[A-Z\d]+|[A-Z~`@#\$%\^&\*\(\)_\-\+=\{\[\}\]\|\\:;\"\'<,>\.\?\/\!]+|[\d~`@#\$%\^&\*\(\)_\-\+=\{\[\}\]\|\\:;\"\'<,>\.\?\/\!]+)$)[a-zA-Z\d~`@#\$%\^&\*\(\)_\-\+=\{\[\}\]\|\\:;\"\'<,>\.\?\/\!]+$/;
								if (!passwordreg.test(value)) {
									callback(new Error('密码必须由大写字母、小写字母、数字、特殊符号中的2种及以上类型组成!'))
								} else {
									callback()
								}
							},
							trigger: ['blur']
						}
					],
					mobilePhone: [{
							required: true,
							message: "请输入手机号码",
							trigger: ['blur']
						},
						{
							validator: function(rule, value, callback) {
								if (/^1[34578]\d{9}$/.test(value) == false) {
									callback(new Error("手机号格式错误"));
								} else {
									callback();
								}
							},
							trigger: ['blur']
						}
					],

				}
			}
		},
		watch: {
			// 监听倒计时
			'codeBtn.codeNumber': {
				handler(val) {
					// 这里监听用户输入完完整的验证码，去调接口验证。
					if (val == 0) {
						this.codeBtn.codeName = '重新获取'
						clearInterval(this.timer)
					}
				}
			}
		},
		methods: {
			// 获取验证码
			getCode() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
					if (res == true) {
						this.codeBtn.isCode = false
						this.codeBtn.codeNumber = 60
						this.merchantList()
						this.timer = setInterval(() => {
							if (this.codeBtn.codeNumber == 0) {
								clearInterval(this.timer)
								return
							}
							this.codeBtn.codeNumber--
						}, 1000)
					} else {
						uni.showToast({
							title: "请安要求填写信息",
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			// 点击聚焦输入框
			focusClick() {
				this.focus = true
			},
			// 输入框失去焦点
			inputCodeBlur(e) {
				let value = e.detail.value
				this.focus = false
			},
			// 输入框聚焦时触发（没用到）
			inputFocus(e, height) {
				console.log(e)
			},
			// 输入框内容变化事件
			inputCode(e) {
				let value = e.detail.value
				this.code = value
			},
			merchantList() {
				var arr = {
					phone: this.model1.mobilePhone,
					type: "1"
				}
				if (this.model1.mobilePhone != "") {
					send(arr).then(res => {
						console.log(res)
						const code = res.data.code;
						if (code == "000000") {
							uni.showToast({
								title: "验证码获取成功",
								icon: 'success',
								duration: 2000
							})
							this.getUserPhone()
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			},
			navigateToAccountLogin() {
				this.model1.loginName = this.model1.mobilePhone
				var arr = {
					phone: this.model1.mobilePhone,
					verCode: this.code
				}
				checkVerCode(arr).then(res => {
					console.log(res)
					const code = res.data.code;
					if (code == "000000") {
						this.Register()
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 2000
						})
					}
				})

			},
			Register() {
				if (this.model1.openId != "") {
					mchUserAdd(this.model1).then(res => {
						console.log(res)
						const code = res.data.code;
						if (code == "000000") {
							uni.showToast({
								title: '注册成功',
								icon: 'success',
								duration: 2000
							})
							// 延时跳转
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							}, 1500)
						} else {
							uni.showToast({
								title: '注册失败',
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			},
			getUserPhone() {
				let that = this;
				wx.login({
					success(res) {
						console.log(res)
						let code = res.code
						let arr = {
							appId: "wxf22c938ec8cdbc08",
							code: code,
						}
						getOpenId(arr).then(res => {
							console.log(res)
							const code = res.data.code;
							if (code == "000000") {
								that.model1.openId = res.data.data.openId
							}
						})
					}
				})
			},
			blur() {
				if (this.model1.password != "" && this.password1 != "") {
					if (this.model1.password != this.password1) {
						uni.showToast({
							title: "两次输入密码不一致!",
							icon: 'none',
							duration: 2000
						})
					}
				}
			}
		},

	}
</script>
<style lang="scss" scoped>
	.index {
		padding: 30rpx;
		height: 100vh;

		.content {
			padding: 20rpx;

			.phone-item {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 30rpx;

				.phone-input {
					width: calc(100% - 240rpx);
					padding: 16rpx;
					border-bottom: 1rpx solid #15d3fe;
				}

				.get-code {
					text-align: center;
					width: 170rpx;
					font-size: 26rpx;
					border-radius: 50rpx;
					padding: 10rpx 0rpx;
					background: #3c9cff;
					color: #fff;
				}
			}

			.input-list {
				display: flex;
				/* 水平居中 */
				justify-content: center;
				/* 垂直居中 */
				align-items: center;

				.input-item {
					width: 0rpx;
				}

				.code-list {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.code-item {
						width: 90rpx;
						height: 90rpx;
						text-align: center;
						line-height: 90rpx;
						border: 1rpx solid #58dffe;
						border-radius: 10rpx;
						font-size: 50rpx;
						color: #00bfff;
						background: #ecfafb;
					}
				}
			}
		}
	}

	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
	}

	.button-area {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.text1 {
		color: #242f66;
		font-size: 30px;
	}

	.text2 {
		color: #242f66;
		font-size: 15px;
		margin: 10% 0% 0% 0%;
	}

	.text3 {
		color: #242f66;
		font-size: 15px;
		margin: 2% 0% 5% 0%;
	}

	.text4 {
		color: #242f66;
		font-size: 15px;
		margin: 15% 0% 0% 0%;
	}

	.text5 {
		color: #242f66;
		font-size: 15px;
		margin: 2% 0% 5% 0%;
	}

	.text6 {
		color: #00bfff;
		font-size: 15px;
		margin-left: 2%;
	}


	.button-wrap {
		margin-top: 10%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.button-login {
		width: 90%;
		height: 110rpx;
		border-radius: 20rpx;
		background: #222d65;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.account-text {
		margin-top: 5%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wx-text {
		margin-top: 10%;
		color: #242f66;
	}

	.wx-text1 {
		margin-top: 10%;
		margin-left: 5px;
		color: #1f9bd8;
	}

	.button-input {
		margin: 5% 0% 40% 0%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.input {
		width: 100%;

	}

	/deep/.uv-input__content__prefix-icon {
		margin-right: 20px !important;
	}

	/deep/.uv-input {
		height: 100rpx !important;
		// background: #efefef !important;
		border-radius: 11px !important;
		/* 可以添加其他样式，如字体大小、边框等 */
	}

	.uv-input:focus {
		border: 2px solid #4A90E2;
		background: #4A90E2;
		/* 修改为蓝色边框 */
		outline: none;
		/* 去除默认的轮廓线 */
	}
</style>